<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="my">我创建的</el-menu-item>
      <el-menu-item index="charge">我负责的</el-menu-item>
      <el-menu-item index="charge">部门</el-menu-item>
      <el-menu-item index="all">全部</el-menu-item>
    </el-menu>

    <!--数据列表-->
    <div class="table-container">
      <div style="font-size:14px;line-height: 30px;">
        <span>合计数量：<span style="font-weight: bold">5</span>吨</span>
        <span style="padding-left:20px">合计毛利：<span style="font-weight: bold">5</span></span>
        <span style="padding-left:20px">发货数量：<span style="font-weight: bold">5</span>吨</span>
        <span style="padding-left:20px">发货毛利：<span style="font-weight: bold">5</span></span>
        <span style="padding-left:20px">退货数量：<span style="font-weight: bold">5</span>吨</span>
        <span style="padding-left:20px">退货毛利：<span style="font-weight: bold">5</span></span>
      </div>
      <vxe-grid ref='xGrid' v-bind="gridOptions" size="mini" :loading="listLoading">
        <template #form>
          <!--搜索-->
          <div>
            <div style="background: #f5f7fa;padding:15px 15px 0 15px;border:1px solid #EBEEF5;border-bottom:0.5px solid #EBEEF5;">
              <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
                <el-form-item label="客户名称：">
                  <el-select
                    clearable
                    v-model="listQuery.customerId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="querySearch">
                    <el-option
                      v-for="item in querySearchList"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="订单日期：">
                  <el-date-picker
                    v-model="listQuery.inquiryDate"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>


                <el-form-item label="供应商：">
                  <el-select
                    clearable
                    v-model="listQuery.customerId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="querySearch">
                    <el-option
                      v-for="item in querySearchList"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="发货状态：">
                  <el-select
                    clearable
                    v-model="listQuery.customerId"
                    placeholder="请输入关键词">
                    <el-option
                      v-for="item in querySearchList"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="商品牌号：">
                  <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
                    <el-option
                      v-for="item in userOptionList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="业务员：">
                  <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
                    <el-option
                      v-for="item in userOptionList"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="审核时间：">
                  <el-date-picker
                    v-model="listQuery.inquiryDate"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>

                <el-form-item>
                  <el-button
                    @click="handleSearchList()"
                    type="primary">
                    查询
                  </el-button>

                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container" style="float:right;">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20,50,100,200]"
                :total="count">
              </el-pagination>
            </div>
          </div>
        </template>
        <template #num1_default="{ row, rowIndex }">
          <el-link @click="toInfo(row)" type="primary"  style="font-size:12px;">{{row.orderSn}}</el-link>
        </template>
        <template #num3_default="{ row, rowIndex }">
          <el-button style="margin-right:10px;" type="text" size="small" @click="toInfo(row)">查看</el-button>
        </template>

      </vxe-grid>
    </div>




  </div>
</template>

<script>

import {supplierInquiryList} from '@/api/allInLine/company'
import { getCustomerOption } from '@/api/allInLine/partner'
import { getOrderUsersList } from '@/api/partner'
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  supplierId:'',
  contactName:'',
  inquiryDate:null,
  goodsKingId:'',
  createUserId:'',
  tab:'my'
};

export default {
  name: "index",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      count:0,
      listLoading:false,
      options:[],
      userOptionList:[],
      gridOptions:{
        loading:this.listLoading,
        border: true,
        id: 'orderDetailedList',
        align:'center',
        autoResize:true,
        height:800,
        size:'mini',
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },

        toolbarConfig: {
          zoom: true,
          custom: true,

        },
        columns: [

          {
            field: '',
            title: '订单日期',
            width: 100,
          },
          {
            field: '',
            title: '销售合同号',
            width: 150,
            slots: {
              // 使用插槽模板渲染
              default: 'num1_default',
            }
          },
          {
            field: '',
            title: '客户名称',
            width: 150,
          },
          {
            field: '',
            title: '供应商',
            width: 150,
          },
          {
            field: '',
            title: '业务员',
            width: 100,
          },
          {
            field: '',
            title: '商品牌号',
            width: 150,
          },
          {
            field: '',
            title: '合同数量',
            width: 100,
          },
          {
            field: '',
            title: '已发货数量',
            width: 100,
          },
          {
            field: '',
            title: '未发货数量',
            width: 100,
          },
          {
            field: '',
            title: '退货数量',
            width: 100,
          },
          {
            field: '',
            title: '结算方式',
            width: 100,
          },
          {
            field: '',
            title: '采购单价',
            width: 100,
          },
          {
            field: '',
            title: '毛利',
            width: 100,
          },
          {
            field: '',
            title: '运费',
            width: 100,
          },
          {
            field: '',
            title: '资询费',
            width: 100,
          },
          {
            field: '',
            title: '合同单价',
            width: 100,
          },
          {
            field: '',
            title: '合计金额',
            width: 100,
          },
          {
            field: '',
            title: '发货日期',
            width: 100,
          },
          {
            field: '',
            title: '发货仓库',
            width: 150,
          },
          {
            field: '',
            title: '发货紧急程度',
            width: 100,
          },
          {
            field: '',
            title: '发货类型',
            width: 100,
          },
          {
            field: '',
            title: '行备注',
            width: 150,
          },
          {
            field: '',
            title: '询价编号',
            width: 150,
          },
          {
            field: '',
            title: '操作',
            width: 100,
            fixed:'right',
            slots: {
              // 使用插槽模板渲染
              default: 'num3_default',
            }
          },
        ],
        data:[{}],
      },
      querySearchList:[]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),

  },
  components : {

  },
  created() {
    // this.getListData();
    // this.getUserOptionList();
  },
  filters: {

  },
  methods:{
    toInfo(item){
      this.$router.push({name:'allInLineOrderDetail'})
    },
    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath){
      this.listQuery.tab = key;
      // this.handleSearchList();
    },
    //获取员工下拉选项
    getUserOptionList(){
      getOrderUsersList().then((res)=>{
        this.userOptionList = res;
      })
    },

    //客户名称输入匹配
    querySearch(queryString){
      if(queryString && queryString!= ''){
        getCustomerOption({keywords:queryString,tab:'my'}).then((res)=>{
          this.querySearchList = res;
        })
      }
    },


    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getListData();
    },
    //获取列表
    getListData(){
      this.listLoading = true;
      let data = JSON.parse(JSON.stringify(this.listQuery));
      supplierInquiryList(data).then((res)=>{
        this.gridOptions.data = res.list;
        this.count = res.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      })
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getListData();
    },

  },
}
</script>

<style scoped lang="scss">

</style>
